<template>
  <el-dialog
    :visible="visible"
    width="450px"
    custom-class="pintuan-wrapper"
    :before-close="handleClose"
  >
    <div slot="title" class="pintuan-header">拼团详情</div>
    <div class="pintuan-body" v-if="!$util.isEmpty(pintuanData)">
      <!-- 1：开团成功；2：拼团成功；3：团购失败 -->
      <div class="pintuan-hint" v-if="pintuanData.status === 1 && pintuanData.expiry_countdown > 0">
        <div class="title">
          距离成功还差<span>{{ pintuanData.total_num - pintuanData.join_num }}</span
          >人
        </div>
        <count-down
          :timestamp="pintuanData.expiry_countdown"
          @change="handleCountDownChange"
          @end="handleCountDownEnd"
        ></count-down>
      </div>
      <div
        class="pintuan-hint"
        v-else-if="pintuanData.status === 1 && pintuanData.expiry_countdown == 0"
      >
        <div class="title">拼团失败</div>
        <div class="desc">拼团时间已过，款项将自动退回</div>
      </div>
      <template v-else-if="pintuanData.status === 2">
        <div class="pintuan-hint" v-if="pintuanData.join_status === 1">
          <div class="title">拼团成功</div>
          <div class="desc">恭喜您拼团成功，快去观看课程吧～</div>
        </div>
        <div class="pintuan-hint" v-else>
          <div class="title">已经拼团成功啦～</div>
          <div class="desc">好友已经拼团成功啦～</div>
        </div>
      </template>
      <div class="pintuan-hint" v-else-if="pintuanData.status === 3">
        <div class="title">拼团失败</div>
        <div class="desc">拼团时间已过，款项将自动退回</div>
      </div>
      <div class="pintuan-list">
        <div class="item" v-for="item in pintuanData.tuan_data" :key="item.user_id">
          <el-avatar
            :size="50"
            :src="item.current_user_avatar_url"
            :class="{
              border: pintuanData.user_id === item.user_id
            }"
          ></el-avatar>
          <div class="tuan" v-if="pintuanData.user_id === item.user_id">
            团长
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="pintuan-footer">
      <template v-if="pintuanData.join_status === 1">
        <div class="btn" v-if="pintuanData.status === 1 && seconds > 0" @click="handleStatusEnd(1)">
          邀请好友参团
        </div>
        <div
          class="btn"
          v-else-if="pintuanData.status === 1 && seconds == 0"
          @click="handleStatusEnd(2)"
        >
          重新开团
        </div>
        <div class="btn" v-else-if="pintuanData.status === 2" @click="handleStatusEnd(2)">
          查看课程
        </div>
        <div class="btn" v-else-if="pintuanData.status === 3" @click="handleStatusEnd(2)">
          重新开团
        </div>
      </template>
      <template v-else>
        <div class="btn" v-if="pintuanData.status === 1 && seconds > 0" @click="handleStatusEnd(3)">
          参与拼团
        </div>
        <div class="btn disabled" v-else-if="pintuanData.status === 2">
          参与拼团
        </div>
      </template>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import CountDown from './countdown'
export default {
  components: {
    CountDown
  },
  data() {
    return {
      seconds: 0
    }
  },
  computed: {
    ...mapState({
      visible: state => state.promotion.pintuanVisible,
      pintuanData: state => state.promotion.pintuanData,
      shareCode: state => state.projectSetting.globShareCode
    })
  },
  methods: {
    // 关闭
    handleClose() {
      this.$store.commit('promotion/SET_PINTUAN_VISIBLE', false)
    },
    // 团状态操作
    handleStatusEnd(type) {
      const _this = this
      const calc = {
        1: () => {
          _this.handleClose()
          let query = {
            type: 11,
            id: _this.$route.params.id,
            promotion: _this.pintuanData.id
          }
          _this.$api.getShareInfo(query, res => {
            _this.$store.commit('promotion/SET_SHARE_DATA', {
              data: res.data,
              type: 11
            })
            _this.$store.commit('promotion/SET_SHARE_VISIBLE', true)
          })
        },
        2: () => {
          _this.handleClose()
          this.$emit('reload')
        },
        3: () => {
          let query = {
            cid: _this.$route.params.id,
            pid: _this.pintuanData.promotion_id
          }
          // 如果code添加code
          if (!_this.$util.isEmpty(_this.shareCode)) {
            query = {
              ...query,
              share_code: _this.shareCode
            }
          }

          query = {
            ...query,
            redirect: this.$route.path
          }

          _this.$api.postPromotionPintuanJoin(
            {
              tuan_id: _this.pintuanData.id
            },
            () => {
              _this.handleClose()
              _this.$router.push({
                path: '/buy/course',
                query: query
              })
            },
            error => {
              _this.$message.error(error.msg)
            }
          )
        },
        run: function(fn) {
          return fn && fn()
        }
      }
      calc.run(calc[type])
    },
    // 发起拼团
    handleCreatePintuan() {
      let _this = this
      let query = {
        cid: _this.$route.params.id,
        pid: _this.pintuanData.promotion_id
      }
      // 如果code添加code
      if (!_this.$util.isEmpty(_this.shareCode)) {
        query = {
          ...query,
          share_code: _this.shareCode
        }
      }

      query = {
        ...query,
        redirect: this.$route.path
      }

      _this.$api.postPromotionPintuanCreate(
        {
          promotion_id: _this.pintuanData.promotion_id
        },
        () => {
          _this.handleClose()
          _this.$router.push({
            path: '/buy/course',
            query: query
          })
        }
      )
    },
    // 拼团内容
    getPintuanData() {
      let _this = this
      _this.$api.getPromotionPintuanDetail(
        {
          tuan_id: _this.pintuanData.id
        },
        res => {
          _this.$store.commit('promotion/SET_PINTUAN_DATA', res.data)
        }
      )
    },
    // 倒计时
    handleCountDownChange(val) {
      this.seconds = val
    },
    // 倒计时结束
    handleCountDownEnd() {
      this.getPintuanData()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .pintuan-wrapper .el-dialog__header {
  border-bottom: 1px solid #ebeef5;
}
.pintuan-wrapper {
  .el-dialog__header {
    border-bottom: 1px solid #ebeef5;
  }
  .pintuan-header {
    font-size: 15px;
    font-weight: 400;
    color: $text-color-import;
  }
  .pintuan-body {
    min-height: 126px;
    .pintuan-hint {
      margin-bottom: 15px;
      .title {
        font-size: 16px;
        font-weight: 500;
        color: $text-color-import;
        text-align: center;
        span {
          color: #ff8a52;
        }
      }
      ::v-deep .countdown {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        .colon {
          padding: 0 3px;
          font-size: 12px;
          font-weight: 400;
          color: #ff6b25;
        }
        .number {
          font-size: 12px;
          color: #ffffff;
          width: 20px;
          height: 22px;
          line-height: 22px;
          text-align: center;
          background: #ff6b25;
          border-radius: 2px;
        }
      }
      .desc {
        margin-top: 12px;
        font-size: 12px;
        font-weight: 400;
        color: $text-color-secondary;
        text-align: center;
      }
    }
    .pintuan-list {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -10px;
      .item {
        padding: 7px 10px;
        display: flex;
        position: relative;
        .border {
          border: 1px solid #ff8a52;
        }
        .tuan {
          position: absolute;
          bottom: -2px;
          left: 19px;
          padding: 2px 4px;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          background: #ff8a52;
          border-radius: 4px;
        }
      }
    }
  }
  .pintuan-footer {
    display: flex;
    justify-content: center;
    .btn {
      width: 126px;
      padding: 7px 0;
      font-size: 14px;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      background: #ff8a52;
      border-radius: 4px;
      cursor: pointer;
      &.disabled {
        background: rgba(255, 138, 82, 0.6);
        cursor: auto;
      }
    }
  }
}
</style>
